<script setup>
import { ref, watch, onMounted } from 'vue'
import PageList from "./page-list.vue"

// 定义props
const props = defineProps({
  mode: String,
  appId: Number,
  appCateShow: {
    type: Boolean,
    default: true
  }
})

// 定义emits（如果需要的话）
// const emit = defineEmits([])

// 响应式数据
const form = ref({
  app_id: null,
  type: 0
})

const TYPES = [
  { name: '全部', value: 0 },
  { name: 'H5', value: 26 },
  { name: 'PC', value: 53 },
  { name: '大屏', value: 17 },
  { name: '定制', value: 367 },
  { name: '外链', value: 4 }
]

// 方法
const init = async () => {
  form.value.app_id = props.appId
}

// 监听器
watch(() => props.appId, (val) => {
  form.value.app_id = val
})

// 生命周期
onMounted(() => {
  init()
})
</script>

<template>
  <div class="portal-detail-container form-list-wrap">
    <AppCate
      v-model="form.app_id"
      v-if="appCateShow"
      class="app-cate-menu"
    />
    <PageList
      :query-page-type="form.type"
      :app-id="form.app_id"
      class="pages-body mb-info"
    >
      <template #query>
        <el-radio-group
          v-model="form.type"
          style="margin-left:5px;"
          size="small"
        >
          <el-radio-button
            v-for="t in TYPES"
            :key="t.value"
            :label="t.value"
          >{{t.name}}</el-radio-button>
        </el-radio-group>
      </template>
    </PageList>
  </div>
</template>

<style lang="scss" scoped>
.pages-body {
  background: #FFF;
  //border-radius: 5px;
  flex: 1;
  //overflow: auto;
  //display: flex;
  //flex-flow: column;
  //height: 100%;
}
</style>
